<template lang="">
  <section class="card-list">
    <a-card
      :extra="record.time"
      :title="record.title"
      v-for="record of cardRecords"
      :key="record.id"
      class="card"
      hoverable
    >
      {{ record.content }}
    </a-card>
  </section>
</template>
<script>
    export default {
        props: {
            cardRecords: {
                type: Array,
                default: () => [],
            },
        },
    };
</script>
<style scoped>
    .card-list {
        padding-bottom: 15px;
    }
    
    .card {
        margin: 16px 0;
    }
</style>